<template>
  <div class="ALL">
    <el-container>
      <el-aside :width="isCollapse ? '64px' : '200px'">
        <div class="menuBox">
          <el-menu
            class="el-menu-vertical-demo"
            background-color="rgb(0 20 39)"
            text-color="#fff"
            router
            active-text-color="#ffd04b"
            default-active="1-4-1"
            @open="handleOpen"
            @close="handleClose"
            :collapse="isCollapse"
            :collapse-transition="false"
          >
            <el-submenu
              v-for="item in meauList"
              :index="item.id + ''"
              :key="item.id + ''"
            >
              <template slot="title">
                <i :class="'icon-' + item.icon" class="iconfont"></i>
                <span>{{ item.title }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item
                  v-for="(item1, route) in item.children"
                  :key="route + ''"
                  :index="item1.component"
                  @click="eachone(item.id, route)"
                  >{{ item1.title }}</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </div>
      </el-aside>
      <el-container>
        <el-header>
          <el-button
            v-model="isCollapse"
            @click="changeFn()"
            style="margin-bottom: 20px"
            class="left el-icon-s-fold"
            ></el-button
          >
          <el-breadcrumb separator="/" class="topTitle left">
            <el-breadcrumb-item :to="{ path: '/home' }"
              >主页</el-breadcrumb-item
            >
            <el-breadcrumb-item v-show="myCookie != ''">{{
              myCookie
            }}</el-breadcrumb-item>
            <el-breadcrumb-item v-show="myLocalStorage != ''">{{
              myLocalStorage
            }}</el-breadcrumb-item>
          </el-breadcrumb>
          <div class="right topTitle">{{ realName }}</div>
          <div class="clear"></div>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { getStore, GetCookie } from "@/config/config";
export default {
  name: "home",
  data() {
    return {
      meauList: JSON.parse(getStore("menu")),
      realName: GetCookie("realName"),
      isCollapse: false,
      myCookie: "",
      myLocalStorage: "",
      windowHeight:null,
      windowWidth:null
    };
  },
  created() {
    let _self = this;
    // 通过当前的路由对象的_self.$route来接收上一个页面传递过来参数
    // this.$route 如果上一个页面时明文的query传参 当前query接收
    // 如果上一个页面时非明文的params传参  当前params接收
    console.log(_self.$route);
  },
  methods: {
    eachone(id, pid) {
      let _self = this;
      for (let i in _self.meauList) {
        if (i == id - 1) {
          _self.myCookie = _self.meauList[i].name;
          for (let j in _self.meauList[i].childList) {
            if (j == pid) {
              _self.myLocalStorage = _self.meauList[i].childList[j].name;
            }
          }
        }
      }
    },
    changeFn() {
      let _self = this;
      _self.isCollapse = !_self.isCollapse;
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
  mounted(){
    let _self = this;
    _self.$erd.listenTo(document.querySelector(".ALL"),(element)=>{
      _self.windowWidth = element.offsetWidth;
      _self.windowHeight = element.offsetHeight;
      if(_self.windowWidth<1000){
        _self.isCollapse = true;
      }
    })
  }
}
</script>
<style scoped>
.topTitle {
  line-height: 3;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.left {
  float: left;
}
.right {
  float: right;
}
.clear {
  clear: both;
}
.menuBox {
  position: fixed;
  height: 100%;
  background: rgb(0 20 39);
  overflow: scroll;
}
.menuBox::-webkit-scrollbar {
  display: none; 
}
.el-menu {
  border-right: 0;
}
</style>